<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { formItem } from '../form-item'
import formBox from '@/components/queryTable/form/index.vue'
import tableBox from '@/components/queryTable/table/index.vue'
import { TableItem } from '@/api/common'
import jdfkService from '@/api/jdfk'
import wjfwService from '@/api/wjfw'
import router from '@/router/index'
import zgfkDialog from '../dialogs/zgfk-dialog.vue'
import fjxxDialog from '@/views/gdjd/jdjl/dialogs/fjxx-dialog.vue'
import jdbDialog from '@/views/gdjd/gdyj/dialogs/jdb-dialog.vue'
const formLabel = ref()
const loading = ref()

// 生命周期
onMounted(async () => {
  // 查询列表数据
  loading.value = true
  formLabel.value = await formItem('gdyjCqyj')
  loading.value = false
  changePageNum(1)
})

// 更多条件查询
const form = ref<any>({
  pageSize: 20,
  pageNum: 1,
  filter: {
    ajmc: '',
    bmsah: '',
    fxjssj: '',
    fxkssj: '',
    jcg: '',
    jdfsdm: '',
    jdztdm: '',
    tysah: '',
  },
})

// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: [
    {
      label: '案件名称',
      prop: 'ajmc',
      width: 200,
      custom: true,
      sort: true,
      dqfs: 'left',
    },
    { label: '部门受案号', prop: 'bmsah', width: 300, dqfs: 'left' },
    { label: '统一受案号', prop: 'tysah', width: 200, dqfs: 'left' },
    { label: '案件类别', prop: 'ajlbmc', width: 200, dqfs: 'left' },
    { label: '承办部门', prop: 'cbbmmc', width: 150, dqfs: 'left' },
    { label: '检察官', prop: 'cbjcg', width: 130, dqfs: 'left' },
    { label: '发现问题时间', prop: 'wtfxsj', width: 160, dqfs: 'left' },
    { label: '监督方式', prop: 'jdfsmc', width: 120, dqfs: 'left' },
    {
      label: '监督状态',
      prop: 'jdztmc',
      width: 120,
      dqfs: 'left',
    },
    { label: '问题分类', prop: 'wtflmc', width: 130, dqfs: 'left' },
    { label: '问题描述', prop: 'wtms', width: 120, dqfs: 'left' },
    { label: '处理意见', prop: 'clyj', width: 130, dqfs: 'left', clyjyjb: true },
    { label: '反馈意见', prop: 'yjfk', width: 130, dqfs: 'left', yjfkyjb: true },
    { label: '结束时间', prop: 'jsrq', width: 120, dqfs: 'left' },
    { label: '附件', prop: 'fjsl', width: 130, dqfs: 'left', custom: true, fjxx: true },
  ],
})

const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
    exportParams: {
      url: `${window.IPCONFIG}/api/jdgl/queryGdjdyjfklb`,
      wjmc: '监督反馈',
    },
  }
})

// 页码发生改变时
const changePageNum = (val: number) => {
  form.value.pageNum = val
  queryTable()
}

// 页条数发生改变时
const changeSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  queryTable()
}

/*
 * 查询列表数据
 */
const queryTable = (refresh?: boolean) => {
  const params = { ...form.value }
  loading.value = true
  jdfkService
    .queryGdjdyjfklb(params)
    .then((res) => {
      tableData.value.data = res.data.list
      total.value = res.data.total
      if (refresh) ElMessage({ type: 'success', message: '刷新成功' })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

// 子组件传过来的方法
const searchTable = (data: any) => {
  let newObj: any = {}
  for (const key in data) {
    if (key.endsWith('-rq')) {
      const kssj = key.replace('-rq', 'ksrq')
      const jssj = key.replace('-rq', 'jsrq')
      if (data[key]?.length) {
        newObj[kssj] = data[key][0]
        newObj[jssj] = data[key][1]
      } else {
        newObj[kssj] = ''
        newObj[jssj] = ''
      }
    }
    newObj[key] = data[key]
  }
  form.value.filter = newObj
  queryTable()
}

/**
 * 表格选择
 */
const multipleSelection = ref<any[]>([])
const selectionChange = (val: any[]) => {
  multipleSelection.value = val
}

// 处理意见、反馈意见打开相应文件
const jdbDialogRef = ref()
const openJdWj = (wjbh: string, title: string) => {
  const params = { wjbh }
  wjfwService.downloadBlob(params).then((res) => {
    if (res.type === 'application/json') {
      const reader = new FileReader()
      reader.onload = () => {
        const jsonData =
          typeof reader.result === 'string' ? JSON.parse(reader.result) : reader.result
        ElMessage({ type: 'warning', message: jsonData.message })
      }
      reader.readAsText(res)
    } else {
      const url = window.URL.createObjectURL(res)
      jdbDialogRef.value?.openDialog(url, title, null, true)
    }
  })
}
/*
 * 点击案件名称进入归档
 */
const checkRow = (row: any, column: any) => {
  if (column.prop === 'ajmc') {
    router.push({
      path: '/jcgshxq',
      query: {
        ...row,
        route: '/jdfk',
        jumpFrom: '',
      },
    })
  } else if (column.prop === 'fjsl') {
    openFjxx(row)
  } else if (column.prop === 'clyj') {
    openJdWj(row.clyjwjbh, row.clyj)
  } else if (column.prop === 'yjfk') {
    openJdWj(row.yjfkwjbh, row.yjfk)
  }
}

const tableBoxRef = ref<InstanceType<typeof tableBox>>()

const rowClick = (row: any) => {
  if (multipleSelection.value?.includes(row)) {
    tableBoxRef.value?.refTable.toggleRowSelection(row, false)
  } else {
    tableBoxRef.value?.refTable.toggleRowSelection(row, true)
  }
}
/*
 * 打开附件信息弹窗
 */
const fjxxDialogRef = ref<InstanceType<typeof fjxxDialog>>()
const openFjxx = (row: any) => {
  fjxxDialogRef.value!.openDialog(row)
}

/*
 * 打开继续监督弹窗
 */
const zgfkDialogRef = ref<InstanceType<typeof zgfkDialog>>()
const openZgfk = (type: string) => {
  zgfkDialogRef.value!.openDialog(multipleSelection.value[0], type)
}
const refresh = () => {
  queryTable(true)
}

const optionsObj = ref<any>({
  ajlbbm: [],
  cbbmbmList: [],
  cbdwbmList: [],
})
</script>
<template>
  <div class="container">
    <div class="form">
      <form-box
        :formData="form.filter"
        :formLabel="formLabel"
        :moreShow="false"
        :optionsObj="optionsObj"
        @searchEvent="searchTable"
      ></form-box>
    </div>

    <div class="submit-list">
      <div>
        <button
          class="btn_operation"
          :disabled="
            multipleSelection.length !== 1 ||
            (multipleSelection[0]?.jdztdm !== 'gd0650001' &&
              multipleSelection[0]?.jdztdm !== 'gd0650005')
          "
          @click="openZgfk('zgfk')"
        >
          <div class="btn-shtg"></div>
          整改反馈
        </button>
        <button
          class="btn_operation"
          :disabled="
            multipleSelection.length !== 1 ||
            (multipleSelection[0]?.jdztdm !== 'gd0650001' &&
              multipleSelection[0]?.jdztdm !== 'gd0650005')
          "
          @click="openZgfk('sqfh')"
        >
          <div class="btn-shtg"></div>
          申请复核
        </button>
        <button class="btn_operation" @click="refresh">
          <div class="btn-refresh"></div>
          刷新
        </button>
      </div>
    </div>

    <div class="table">
      <table-box
        gnbm="jdjl"
        ref="tableBoxRef"
        :tableData="tableData"
        :selectShow="true"
        :showExport="true"
        :getTableDataParam="page"
        :formParams="
          form.filter.cbbmbmList ? form : { ...form, filter: { ...form.filter, cbbmbmList: [] } }
        "
        @selectionChange="selectionChange"
        @changeCurrent="changePageNum"
        @changeSize="changeSize"
        @checkRow="checkRow"
        @rowClick="rowClick"
      >
      </table-box>
    </div>
    <!--反馈、复核-->
    <zgfk-dialog ref="zgfkDialogRef" @refresh="queryTable" />
    <!--附件信息-->
    <fjxx-dialog ref="fjxxDialogRef" @refresh="queryTable" />
    <!-- 监督意见表 -->
    <jdb-dialog ref="jdbDialogRef"></jdb-dialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .progress-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #dae4f1;
    margin-bottom: 26px;
    .progress {
      width: 80%;
      padding: 10px 0 20px 0;
      display: flex;
      .progress-left {
        display: flex;
        flex: 1;
        & > span {
          display: inline-block;
          width: 60px;
        }
        .el-progress {
          width: 100%;
        }
      }

      .progress-right {
        display: flex;
        flex: 1;
        padding-left: 20px;
        & > span {
          display: inline-block;
          width: 90px;
        }
        .el-progress {
          width: 100%;
        }
      }
    }
  }

  .submit-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .table {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
  }

  .active-img {
    float: left;
    cursor: pointer;
  }
  .active-img + .active-img {
    margin-left: 10px;
  }
}
</style>
